<!--
 * new page
 * @author: YK
 * @since: 2024-01-19
 * index.vue
-->
<template>
  <div :class="{ 'm--choose-icon-dialog-body-height': isScoroll }">
    <el-dialog v-model="dialogVisible" v-bind="$attrs">
      <template #default>
        <m-form
          ref="formRef"
          label-width="100px"
          :style="{ width: '600px' }"
          :options="options"
          @on-success="onSuccess"
        >
          <template #uploadArea>
            <slot name="uploadArea"></slot>
          </template>
          <template #tip>
            <slot name="tip"></slot>
          </template>
        </m-form>
      </template>
      <template #footer>
        <slot name="footer" :form="formRef"></slot>
      </template>
      <template #header>
        <slot name="header"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { FormOptions } from "../../../components/form/src/types/types";
import type { FormInstance } from "element-plus";
const props = withDefaults(
  defineProps<{
    visiable: boolean;
    options: FormOptions[];
    isScoroll: boolean; //只在屏幕区域内滚动
    onSuccess: (file: File) => void;
  }>(),
  {
    visiable: false,
    options: () => [],
    isScoroll: false,
  }
);
const emit = defineEmits(["update:visiable"]);
const dialogVisible = ref<boolean>(props.visiable);
watch(
  () => props.visiable,
  (newValue) => (dialogVisible.value = newValue)
);
watch(dialogVisible, (newValue) => emit("update:visiable", newValue));
//表单实例
const formRef = ref<FormInstance>();
</script>

<style scoped lang="scss"></style>
